<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="common/include :: header('新增文章')"/>
    <th:block th:include="common/include :: select2-css"/>
    <th:block th:include="common/include :: editormd-css"/>
    <th:block th:include="common/include :: jquery-tags-input-css"/>
</head>
<body>
<div class="main-content">
    <form id="form-article-add" class="form-horizontal">
        <input name="catalogId" type="hidden" id="catalogId"/>
        <h4 class="form-header h4">基本信息</h4>
        <div class="row">
            <div class="col-sm-4">
                <div class="form-group">
                    <label class="col-sm-3 control-label is-required">文章标题：</label>
                    <div class="col-sm-8">
                        <input name="title" placeholder="请输入文章标题" class="form-control" type="text" maxlength="30"
                               required>
                    </div>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="form-group">
                    <label class="col-sm-3 control-label is-required">所属目录：</label>
                    <div class="col-sm-9">
                        <div class="input-group">
                            <input name="catalogName" onclick="selectCatalogTree()" id="catalogName" type="text"
                                   placeholder="请选择所属目录" class="form-control" required>
                            <span class="input-group-addon"><i class="fa fa-search"></i></span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="form-group">
                    <label class="col-sm-3 control-label is-required">是否展示：</label>
                    <div class="col-sm-9">
                        <select name="isRelease" class="form-control m-b" th:with="type=${@dict.getType('sys_yes_no')}"
                                required>
                            <option th:each="dict : ${type}" th:text="${dict.dictLabel}"
                                    th:value="${dict.dictValue}"></option>
                        </select>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-4">
                <div class="form-group">
                    <label class="col-sm-3 control-label">上一篇文章：</label>
                    <div class="col-sm-9">
                        <div class="input-group">
                            <input name="lastArticleName" onclick="selectArticleTree('lastArticle')"
                                   id="lastArticleName" type="text" placeholder="请选择上一篇文章" class="form-control">
                            <span class="input-group-addon"><i class="fa fa-search"></i></span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="form-group">
                    <label class="col-sm-3 control-label">下一篇文章：</label>
                    <div class="col-sm-9">
                        <div class="input-group">
                            <input name="nextArticleName" onclick="selectArticleTree('nextArticle')"
                                   id="nextArticleName" type="text" placeholder="请选择下一篇文章" class="form-control">
                            <span class="input-group-addon"><i class="fa fa-search"></i></span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="form-group">
                    <label class="col-sm-3 control-label is-required">是否评论：</label>
                    <div class="col-sm-9">
                        <select name="isDiscuss" class="form-control m-b" th:with="type=${@dict.getType('sys_yes_no')}"
                                required>
                            <option th:each="dict : ${type}" th:text="${dict.dictLabel}"
                                    th:value="${dict.dictValue}"></option>
                        </select>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-4">
                <div class="form-group">
                    <label class="col-sm-3 control-label is-required">文章类型：</label>
                    <div class="col-sm-9">
                        <select name="articleType" class="form-control m-b"
                                th:with="type=${@dict.getType('content_article_type')}" required>
                            <option th:each="dict : ${type}" th:text="${dict.dictLabel}"
                                    th:value="${dict.dictValue}"></option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="form-group">
                    <label class="col-sm-3 control-label is-required">文章标签：</label>
                    <div class="col-sm-8">
                        <input name="articleTags" id="articleTags" class="form-control" type="text" maxlength="30">
                    </div>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="form-group">
                    <label class="col-sm-3 control-label is-required">原文链接：</label>
                    <div class="col-sm-8">
                        <input name="articleUrl" class="form-control" type="text">
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12">
                <div class="form-group">
                    <label class="col-sm-1 control-label is-required">文章描述：</label>
                    <div class="col-sm-11">
                        <input id="desca" name="desca" placeholder="请输入文章描述" class="form-control" type="text">
                    </div>
                </div>
            </div>
        </div>
        <h4 class="form-header h4">文章内容</h4>
        <div class="row">
            <div class="col-sm-12" id="content-editor">
                <textarea style="display:none;" name="content" id="content"></textarea>
            </div>
        </div>
    </form>
</div>

<div class="row">
    <div class="col-sm-offset-5 col-sm-10">
        <button type="button" class="btn btn-sm btn-primary" onclick="submitHandler()"><i class="fa fa-check"></i>保 存
        </button>&nbsp;
        <button type="button" class="btn btn-sm btn-danger" onclick="closeItem()"><i class="fa fa-reply-all"></i>关 闭
        </button>
    </div>
</div>
<th:block th:include="common/include :: footer"/>
<th:block th:include="common/include :: select2-js"/>
<th:block th:include="common/include :: editormd-js"/>
<th:block th:include="common/include :: jquery-tags-input-js"/>
<script>
    var prefix = ctx + "content/article";
    var module = "article";

    $(function () {
        $('#articleTags').tagsInput();

        var editor = editormd("content-editor", {
            width: "100%",
            height: 640,
            syncScrolling: "single",
            path: ctx + "ajax/libs/editormd/lib/",
            imageUpload: true,
            imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
            imageUploadURL: ctx + "common/editormdUpload",
            saveHTMLToTextarea: true
        });
    });

    $("#form-article-add").validate({
        onkeyup: false,
        rules: {
            catalogName: {
                required: true
            },
            isDiscuss: {
                required: true
            },
            isRelease: {
                required: true
            }
        },
        focusCleanup: true
    });

    function submitHandler() {
        if ($.validate.form()) {
            var data = $("#form-article-add").serializeArray();
            $.operate.saveTab(prefix + "/add", data);
        }
    }

    /*文章管理-新增-选择目录树*/
    function selectCatalogTree() {
        var treeId = $("#catalogId").val();
        var url = ctx + "content/catalog/selectCatalogTree/" + treeId + "-" + module;
        var options = {
            title: '选择目录',
            width: "380",
            url: url,
            callBack: doSubmit
        };
        $.modal.openOptions(options);
    }

    function doSubmit(index, layero) {
        var tree = layero.find("iframe")[0].contentWindow.$._tree;
        if ($.tree.notAllowParents(tree)) {
            var body = layer.getChildFrame('body', index);
            $("#catalogId").val(body.find('#treeId').val());
            $("#catalogName").val(body.find('#treeName').val());
            layer.close(index);
        }
    }

    var operaId = "";

    /*文章管理-选择文章*/
    function selectArticleTree(id) {
        operaId = id;
        var treeId = $("#"+operaId+"Id").val();
        var id = $.common.isEmpty(treeId) ? "null" : $("#"+operaId+"Id").val();
        var url = ctx + "content/article/selectArticleTree/" + id;
        var options = {
            title: '选择文章',
            width: "380",
            url: url,
            callBack: doArticleSubmit
        };
        $.modal.openOptions(options);
    }

    function doArticleSubmit(index, layero) {
        var tree = layero.find("iframe")[0].contentWindow.$._tree;
        if ($.tree.notAllowParents(tree)) {
            var body = layer.getChildFrame('body', index);
            $("#" + operaId + "Id").val(body.find('#treeId').val());
            $("#" + operaId + "Name").val(body.find('#treeName').val());
            layer.close(index);
        }
    }

</script>
</body>
</html>
